<template>
	<view class="word_book_box">
		<view class="tabbar">
			<uni-segmented-control 
				:current="current" 
				:values="items" 
				style-type="text"
				@clickItem="onClickItem"
				:active-color="'#0000fffd'"
			/>
		</view>
		<view class="content">
			<view class="item flex_js" v-for="item in books" :key="item.id">
				<view class="left">
					<image :src="item.picture" mode="aspectFit"></image>
				</view>
				<view class="center flex_js">
					<view>
						<view class="title">{{ item.bookName }}</view>
						<view class="text">{{ item.description }}</view>
					</view>
					<view class="num">共{{ item.wordNumber }}词</view>
				</view>
				<view class="pos_ab switch" v-if="bookId != item.id" @tap="switchBook(item.id)">切 换</view>
				<view class="pos_ab" style="color: #333333; font-size: 28rpx;" v-if="bookId == item.id">当前词书</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { listWordBook, userWordBookEdit } from '@/api/homes/wordBook/wordBook.js'
	export default {
		data() {
			return {
				status: '',
				bookId: '',
				current: 0,
				items: [ '小学', '初中', '高中', '大学', '新概念'],
				books: [],
				params: {
					page: 1,
					size: 1000,
					data: '热门'
				}
			}
		},
		onLoad(options) {
			this.bookId = options.bookId
			this.status = options.type
			this.getWordBook()
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				
				this.params.data = this.items[e.currentIndex]
				this.getWordBook()
			},
			getShowToast(title, icon) {
				uni.showToast({
					title,
					icon
				})
			},
			switchBook(id) {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '确认要切换词书吗',
					success: function (res) {
						if (res.confirm) {
							that.getUserWordBookEdit(id)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async getWordBook() {
				const { data } = await listWordBook(this.params)
				this.books = data
			},
			async getUserWordBookEdit(id) {
				const { code, msg } = await userWordBookEdit(id, this.status)
				if (code === 200) {
					uni.setStorageSync('planBookId',id)
					uni.navigateBack()
				} else {
					this.getShowToast(msg, 'error')
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
.word_book_box {
	height: 100vh;
	background: $uni-bg-color-page;
	
	.tabbar{
		border-bottom: 2rpx solid #96a4b9;
		padding-bottom: 10rpx;
	}
	
	.content {
		padding: 30rpx;
		
		.item {
			margin-bottom: 30rpx;
			position: relative;
			
			.left {
				width: 150rpx;
				height: 200rpx;
				margin-right: 40rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			.center {
				width: calc(100% - 190rpx);
				flex-direction: column;
				
				
				.title {
					font-size: 32rpx;
					font-weight: 600;
					color: $uni-text-color;
				}
				
				.text {
					color: #33333380;
					font-size: 28rpx;
					margin-top: 10rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
				.num {
					margin-top: 20rpx;
					color: #33333380;
					font-size: 28rpx;
				}
			}
			
			.switch {
				width: 100rpx;
				height: 40rpx;
				text-align: center;
				background-color: #0000ff;
				color: #fff;
				font-size: 24rpx;
				border-radius: 50rpx;
			}
			
			.pos_ab {
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}
}
</style>